<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
        <title>移交</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/layui/css/dtree.css">
    <link rel="stylesheet" href="../lib/layui/font/dtreefont.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/FileSaver.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <div class="layui-fluid">
    
    <div class="layui-row">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md3" style="margin: 40px 0 70px 0;">
          <ul id="demoTree1" class="dtree" data-id="0"></ul>
        </div>
        <div class="layui-col-md9">
          <div style="margin-left: 14%; margin-top: 24px;">
            <form class="layui-form">
              <div class="layui-input-inline layui-form-item">
                <div id="fields" style="width: 100px;"></div>
              </div>
              <div class="layui-input-inline layui-form-item">
                <input type="text" class="layui-input" placeholder="请输入关键字" style="width: 350px;"></input>
              </div>
              <div class="layui-input-inline layui-form-item">
                <button class="layui-btn layui-btn-small" id="clickme" title="检索" lay-filter="find" lay-submit="" style="line-height:1.4em;margin-left:4px;">
                    <i class="layui-icon layui-icon-search" style="line-height:30px"></i>
                </button>
              </div>
            </form>
          </div>
          <table id="t1"></table>
        </div>
      </div>
    </div>
    
  </div>
  <script type="text/html" id="f_demo">
    <select class="layui-input" name="field">
        <option value="0">题名</option>
        <option value="1">档号</option>
    </select>
  </script>
  <script type="text/html" id="toolbarD">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-normal" lay-event="join">
        移交 <i class="layui-icon">&#xe609;</i></button>
      <!-- <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>新增条目</button>
      <button class="layui-btn layui-btn-normal" lay-event="upAll"><i class='layui-icon'>&#xe64c;</i>批量挂接</button> -->
    </div>
  </script>
  <script type="text/html" id="spTpl">
    <select name="type" lay-filter="sortC">
      <option value="0">文本框</option>
      <option value="1">可选项</option>
      <option value="2">文本域</option>
      <option value="3">存放地</option>
    </select>
  </script>
  <script>
    var tree = [];
    var fies = [];     
    layui.use("laytpl", function(){
        var laytpl = layui.laytpl
        ,getTpl = f_demo.innerHTML
        ,fields = document.getElementById('fields');
        laytpl(getTpl).render(fies, function(html){
            fields.innerHTML = html;
        });
    })
    axios.get('/api/get_q').then(res=>{
      tree = res.data;
      layui.config({
          base: '../lib/layui/layui-expand/'
      }).extend({
          dtree: 'dtree'
      }).use(['table', 'dtree'], function(){
        var dtree = layui.dtree
        ,table = layui.table;
        dtree.render({
          elem: "#demoTree1"  //绑定元素
          ,data: tree  //异步接口
          ,dataFormat: "list"
          ,record: true
          ,skin: "laySimple"
          ,line: true
        });
        table.render({
          elem: '#t1'
          ,width: 700
          ,height: 540
          ,toolbar: '#toolbarD'
          ,defaultToolbar: []
          ,cols: [[
            {type:'checkbox'},
            {'field': 'DH', 'title': '档号'},
            {'field': 'TM', 'title': '题名'},
            {'field': '', 'title': '审批人', templet: '#spTpl'},
          ]]
          ,data: []
        });
      })
    })
  </script>
</body>
</html>